import React from 'react';
import { Card, Row, Col, Alert } from 'antd';
import ScrollBarLayout from '@/components/ScrollBarLayout';

import './index.less';
import cls from 'classnames';
import { TabIcon } from './TabIcon';

interface ITabsColor {
  colorInfo: Record<string, any>;
  colorList: IcolorType[];
}

interface IcolorType {
  name: string;
  key: string;
}

export const TabColor: React.FC<ITabsColor> = React.memo(
  ({ colorInfo, colorList }) => {
    return (
      <div className={cls('theme-pane-layout')}>
        <ScrollBarLayout style={{ padding: '0px 0px 5px' }}>
          <Card
            title="颜色"
            bodyStyle={{ padding: 10 }}
          >
            <Row gutter={[8, 8]}>
              {colorList.map((item) => {
                return (
                  <Col span={4} key={item.key}>
                    <div
                      className={'theme-pane-color'}
                      style={{ background: colorInfo?.[item.key] }}
                    >
                      {item.name}
                    </div>
                  </Col>
                );
              })}
            </Row>
          </Card>

          <TabIcon />

          <Card
            title="提示"
            style={{ marginTop: '16px' }}
            bodyStyle={{ padding: 10 }}
          >
            <div className={cls('theme-pane-alert')}>
              <Alert message="Success Tips" type="success" showIcon />
              <Alert
                message="Informational Notes"
                type="info"
                showIcon
                style={{ marginTop: '16px' }}
              />
              <Alert
                message="Warning"
                type="warning"
                showIcon
                closable
                style={{ marginTop: '16px' }}
              />
              <Alert
                message="Error"
                type="error"
                showIcon
                style={{ marginTop: '16px' }}
              />
              <Alert
                message="Success Tips"
                description="Detailed description and advice about successful copywriting."
                type="success"
                showIcon
                style={{ marginTop: '16px' }}
              />
              <Alert
                message="Informational Notes"
                description="Additional description and information about copywriting."
                type="info"
                showIcon
                style={{ marginTop: '16px' }}
              />
              <Alert
                message="Warning"
                description="This is a warning notice about copywriting."
                type="warning"
                showIcon
                closable
                style={{ marginTop: '16px' }}
              />
              <Alert
                message="Error"
                description="This is an error message about copywriting."
                type="error"
                showIcon
                style={{ marginTop: '16px' }}
              />
            </div>
          </Card>
        </ScrollBarLayout>
      </div>
    );
  },
);
